/*
 * @Description: 
 * @Version: 2.0
 * @Author: cxc
 * @Date: 2022-03-29 22:53:08
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-06 17:49:47
 */
import './EmployeesList.css'
import React, { useState, } from 'react'
import { Row, Col, Table, Tag, Form, Input, Select, DatePicker, Button, Space } from 'antd';
import {
  SettingOutlined,
  LineChartOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import ComButton from '../../components/employee/ComButton';
import EmployeeHeader from '../../components/employee/employee_header/EmployeeHeader';
import EmployeeFooter from '../../components/employee/employee_footer/EmployeeFooter';
import UserModal from '../../components/employee/Modal/UserModal';
import { permissionsColor, mangerColor, alterColor, deleteColor } from './color/employeeColor'

export default function EmployeesList() {
  const { Option } = Select;
  const columns = [
    { title: '账号', dataIndex: 'name', key: 'name', className: 'col_item', width: 50, align: 'center' },
    { title: '姓名', dataIndex: 'name', key: 'name', className: 'col_item', width: 50, align: 'center' },
    { title: '手机号码', dataIndex: 'name', key: 'name', className: 'col_item', width: 50, align: 'center' },
    { title: '部门', dataIndex: 'name', key: 'name', className: 'col_item', width: 50, align: 'center' },
    { title: '职位', dataIndex: 'name', key: 'name', className: 'col_item', width: 50, align: 'center' },
    { title: '客户数量限制', dataIndex: 'name', key: 'name', className: 'col_item  ', width: 80, align: 'center' },
    { title: '员工提成', dataIndex: 'name', key: 'name', className: 'col_item', width: 50, align: 'center' },
    {
      title: '状态', dataIndex: 'state', key: 'state', className: 'col_item', width: 50, align: 'center', render: state => {
        return (state === true ? <Tag color='#019966'>启用</Tag> : <Tag color='#ff0101'>禁用</Tag>)
      }
    },
    {
      title: '管理',
      dataIndex: '',
      key: 'x',
      width: 200,
      align: 'center',
      className: 'col_item ',
      render: (text, record) => (<>
        <Row >
          <Col className="gutter-row" span={6}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='权限' BCcolor={permissionsColor} icon={<SettingOutlined />} handleClick={showModal(0, record)} />
          </Col>
          <Col className="gutter-row" span={6}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='管理范围' BCcolor={mangerColor} icon={<LineChartOutlined />} handleClick={handleClick} />
          </Col>
          <Col className="gutter-row" span={6}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='修改' BCcolor={alterColor} icon={<EditOutlined />} handleClick={handleClick} />
          </Col>
          <Col className="gutter-row" span={6}>
            <ComButton fs='10px' height='30px' size='small' type='primary' btnName='删除' BCcolor={deleteColor} icon={<DeleteOutlined />} handleClick={handleClick} />
          </Col>
        </Row>
      </>),
    },
  ];
  const data = [
    {
      key: 1,
      name: 'John ',
      state: true
    },
    {
      key: 2,
      name: 'John ',
      state: false
    },

  ];
  // 折叠状态
  const [isShow, setIsShow] = useState(false)
  // 权限
  const [isAuth, setIsAuth] = useState(false)
  // 管理范围
  // 修改
  // 删除
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  function handleClick() { }
  function onChange(date, dateString) {
    console.log(date, dateString);
  }
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  // 折叠显示方法
  function show() {
    return (
      <>
        <Row className='employeesList_fold'>
          <Col span={24} className='fold_col'>
            <Form
              colon={false}
              form={form}
              labelCol={{ span: 8 }}
              // wrapperCol={{ span: 16 }}
              name="advanced_search"
              className="ant-advanced-search-form"
              onFinish={onFinish}
            >
              <Row >
                <Col span={8} className='fold_item'>
                  <Form.Item
                    label="姓名"
                    name="username"
                    className='employee_form_item'
                    rules={[{ message: 'Please input your username!' }]}
                  >
                    <Input size='small' />
                  </Form.Item>
                  <Form.Item
                    label="生日"
                    className='employee_form_item'
                  >
                    {/* name="bir_first_day" */}
                    <Form.Item noStyle>
                      <DatePicker className='fold1_DatePicker' size='small' />~
                    </Form.Item>
                    {/* name="bir_last_day" */}
                    <Form.Item noStyle>
                      <DatePicker className='fold1_DatePicker' size='small' />
                    </Form.Item>
                  </Form.Item>
                </Col>
                <Col span={8} className='fold_item'>
                  <Form.Item
                    label="性别"
                    name="sex"
                    className='employee_form_item'

                    rules={[{ message: 'Please input your username!' }]}
                  >
                    <Select className='fold_item2_Select' size='small' style={{ width: 120 }} onChange={handleChange}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    label="所在部门"
                    name="department"
                    className='employee_form_item'
                    rules={[{ message: 'Please input your username!' }]}
                  >
                    <Select size='small' className='fold_item2_Select' style={{ width: 120 }} onChange={handleChange}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={8} className='fold_item fold_item3'>
                  <Form.Item
                    label="手机号码"
                    name="phone"
                    className='employee_form_item'

                    rules={[{ message: 'Please input your username!' }]}
                  >
                    <Input size='small' />
                  </Form.Item>
                  <Form.Item
                    label="是否离职"
                    name="isWorking"
                    className='employee_form_item '
                    rules={[{ message: 'Please input your username!' }]}
                  >
                    <Select size='small' className='fold_item3_Select' style={{ width: 120 }} onChange={handleChange}>
                      <Option value="jack">是</Option>
                      <Option value="lucy">否</Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Col >
          <Col span={24}>
          </Col>
        </Row >
        <Row>
          <Col span={24} className='employeesList_fold_btn_wrap'>
            <Space size={2}>
              <Button className='employeesList_fold_btn1'>立即搜索</Button>
              <Button className='employeesList_fold_btn2'>清空条件</Button>
            </Space>
          </Col>
        </Row>
      </>

    )
  }
  // 处理折叠方法
  function handleShow(flag) {
    console.log(flag);
    setIsShow(flag)
  }
  // 显示模态框
  const showModal = (type, row) => {
    console.log(row);
    // 0-权限，1-管理范围，2-修改，3-删除
    return () => {
      switch (type) {
        case 0:
          setIsAuth(true)
          return
        case 1:
          return
        case 2:
          return;
        case 3:
          // 判断是否有关联数据，如果有关联数据，无法删除
          // 有关联数据
          // setIsCantDeleteShow(true)
          // 无关联数据
          // setDelDepartName(row.name)
          // setIsDeleteShow(true)
          return
        default:
          return
      }
    }
  };
  // 员工资料ok
  function handleUserDataOk() {
    setIsAuth(false)
  }
  // 员工资料cancel
  function handleUserDataCancel() {
    setIsAuth(false)
  }

  return (
    <>
      {/* 头部 */}
      <Row>
        <Col span={24}>
          <EmployeeHeader handleShow={handleShow} />
        </Col>
      </Row>
      {/* 可折叠部分 */}
      {isShow === true ? show() : <></>}
      {/* 内容 */}
      < Row className='employeeList_con ' >
        <Col span={24} className='theadSty2'>
          <Table
            className='theadSty2'
            columns={columns}
            dataSource={data}
            pagination={{ position: ['none', 'none'] }}
            bordered
          />
        </Col>
      </Row >
      {/* 分页 */}
      < Row >
        <Col span={24}>
          {/* <EmployeeFooter></EmployeeFooter> */}
        </Col>
      </Row >
      {/* 模态框 */}
      <UserModal
        title='用户权限'
        visible={isAuth}
        onOk={handleUserDataOk}
        onCancel={handleUserDataCancel}
      />
    </>
  )
}
